<template>
  <div id="app">
    <form-create v-model="formData" v-model:api="formApi" :rule="formRules" @submit="handleSubmit" />

    <!-- 显示接口返回的消息的模态框 -->
    <div v-if="showModal" class="modal-overlay" @click="hideModal">
      <div class="modal-content" @click.stop>
        <h2 class="modal-title">接口返回消息</h2>
        <div class="modal-body">
          <pre><strong>Status Code:</strong> {{ statusCode }}</pre>
          <pre><strong>Response Data:</strong> {{ responseData }}</pre>
          <pre><strong>Error Message:</strong> {{ errorMessage }}</pre>
        </div>
        <button class="modal-close" @click="hideModal">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios'; // 引入 axios 库

// 表单数据
const formData = ref({});
// 表单 API 实例
const formApi = ref(null);
// 控制模态框的显示
const showModal = ref(false);
// 接口返回的消息
const responseData = ref('');
const statusCode = ref('');
const errorMessage = ref('');

// 表单规则
const formRules = ref([
  {
    "type": "subForm",
    "field": "header",
    "title": "表头数据",
    "info": "",
    "$required": false,
    "props": {
      "rule": [
        {
          "type": "input",
          "field": "JCID",
          "title": "集采ID",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fcs3m0oy8cwgcA2",
          "name": "ref_Fht4m0oy8cwgcA2",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "po_number",
          "title": "采购订单编号",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fcs3m0oy8cwgc5c",
          "name": "ref_Fht4m0oy8cwgc6c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "comp_code",
          "title": "公司代码",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fmx1m0oy8qzwc8c",
          "name": "ref_Fht4m0oy8cwgc6c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "vendor",
          "title": "供应商",
          "info": "",
          "$required": false,
          "_fc_id": "id_Ftqtm0oy9119cac",
          "name": "ref_Fht4m0oy8cwgc6c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "pur_group",
          "title": "采购组",
          "info": "",
          "$required": false,
          "_fc_id": "id_F25wm0oy9a2occc",
          "name": "ref_Fht4m0oy8cwgc6c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "doc_type",
          "title": "采购凭证类型",
          "info": "",
          "$required": false,
          "_fc_id": "id_F2apm0oy9jakcec",
          "name": "ref_Fht4m0oy8cwgc6c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "username_sap",
          "title": "创建人",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fwmwm0oy9tamcgc",
          "name": "ref_Fht4m0oy8cwgc6c",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        }
      ]
    },
    "_fc_id": "id_Ftx1m0oytu4ze6c",
    "name": "ref_Fjdzm0oytu4ze7c",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "subForm"
  },
  {
    "type": "group",
    "field": "item",
    "title": "项目数据",
    "info": "",
    "$required": false,
    "props": {
      "rule": [
        {
          "type": "input",
          "field": "po_number",
          "title": "采购订单",
          "info": "",
          "$required": false,
          "_fc_id": "id_F6djm0oybl79cuc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "po_item",
          "title": "项目",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fjxum0oyc8vocwc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "material",
          "title": "物料",
          "info": "",
          "$required": false,
          "_fc_id": "id_Ffz9m0oyg9z6cyc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "short_text",
          "title": "物料描述",
          "info": "",
          "$required": false,
          "_fc_id": "id_F5ikm0oyghmcd0c",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "quantity",
          "title": "采购订单数量",
          "info": "",
          "$required": false,
          "_fc_id": "id_F894m0oygrgzd2c",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "po_unit",
          "title": "订单单位",
          "info": "",
          "$required": false,
          "_fc_id": "id_F58km0oyh4wvd4c",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "free_item",
          "title": "免费项目",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fzz7m0oyhf9pd6c",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "matl_group",
          "title": "物料组",
          "info": "",
          "$required": false,
          "_fc_id": "id_F236m0oyhomvd8c",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "plant",
          "title": "工厂",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fsw2m0oyhyqcdac",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "stge_loc",
          "title": "库存地点",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fnx3m0oyi7j8dcc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "preq_no",
          "title": "采购申请",
          "info": "",
          "$required": false,
          "_fc_id": "id_Faxrm0oyig5gdec",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "preq_item",
          "title": "采购申请项目",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fzsum0oyiodadgc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "tax_code",
          "title": "税码",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fi4am0oyixtgdic",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "item_cat",
          "title": "采购项目类别",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fkvsm0oyj61gdkc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "acctasscat",
          "title": "科目分配",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fu41m0oyjf9vdmc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "currency",
          "title": "货币码",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fwkhm0oyjnladoc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "cond_value",
          "title": "净价",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fsehm0oyjwgsdqc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "delivery_date",
          "title": "项目交货日期",
          "info": "",
          "$required": false,
          "_fc_id": "id_F9jpm0oyk498dsc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "cond_p_unt",
          "title": "价格单位",
          "info": "",
          "$required": false,
          "_fc_id": "id_F4exm0oyke53duc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "delete_ind",
          "title": "删除标识",
          "info": "",
          "$required": false,
          "_fc_id": "id_F2rbm0oykm9odwc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "unloadingPoint",
          "title": "卸货点",
          "info": "",
          "$required": false,
          "_fc_id": "id_Frqpm0oykvxvdyc",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "itemtext",
          "title": "项目文本",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fzl4m0oylc6se0c",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "moldtype",
          "title": "模具类别",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fnsgm0oylhece2c",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        },
        {
          "type": "input",
          "field": "po_remark",
          "title": "采购备注",
          "info": "",
          "$required": false,
          "_fc_id": "id_Fiuhm0oylozfe4c",
          "name": "ref_Fhmam0oyamfrcmc",
          "display": true,
          "hidden": false,
          "_fc_drag_tag": "input"
        }
      ]
    },
    "_fc_id": "id_F5qrm0oya9hycic",
    "name": "ref_F92cm0oya9hycjc",
    "display": true,
    "hidden": false,
    "_fc_drag_tag": "group"
  }
]);

// 隐藏模态框的函数
const hideModal = () => {
  showModal.value = false;
};

// 提交表单的函数
const handleSubmit = async (data) => {
  console.log('提交的数据:', JSON.stringify(data, null, 2));
  try {
    const username = 'IT10';
    const password = '654321';
    const encodedCredentials = btoa(`${username}:${password}`);
    const response = await axios.post('/zjcpt/ZFM_JICAI_02?sap-client=700', data, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + encodedCredentials
      }
    });

    // 调试信息
    console.log('接口返回完整响应:', response);

    // 处理接口的响应
    responseData.value = JSON.stringify(response.data, null, 2);
    statusCode.value = response.status;
    errorMessage.value = '';
    showModal.value = true; // 显示模态框
  } catch (error) {
    // 调试信息
    console.error('提交失败:', error);

    // 处理错误情况
    if (error.response) {
      console.log('错误响应:', error.response);
      responseData.value = JSON.stringify(error.response.data, null, 2);
      statusCode.value = error.response.status;
      errorMessage.value = error.response.data.message || '提交失败，请重试。';
    } else {
      responseData.value = '';
      statusCode.value = '';
      errorMessage.value = '提交失败，请重试。';
    }
    showModal.value = true; // 显示模态框
  }
};
</script>

<style scoped>
/* 样式可根据需要调整 */
.response-message {
  margin-top: 20px;
  color: #409eff;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 80%;
  width: 600px;
  /* 适应屏幕宽度 */
  max-height: 80%;
  /* 适应屏幕高度 */
  overflow: auto;
  /* 添加滚动条 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

.modal-title {
  margin: 0;
  font-size: 1.5em;
  color: #333;
}

.modal-body {
  margin-top: 10px;
  color: #333;
  overflow-y: auto;
  /* 内部滚动条 */
}

.modal-body pre {
  white-space: pre-wrap;
  /* 保持换行 */
  word-break: break-word;
  /* 自动换行 */
  background: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: auto;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #ff4d4d;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 1em;
}

.modal-close:hover {
  background: #e60000;
}
</style>